import {
    View, Text, Image, Dimensions, TouchableOpacity,
    Alert, DeviceEventEmitter, AsyncStorage
} from 'react-native';
import React, {Component} from 'react';

import {Button, List, InputItem, Toast} from 'antd-mobile-rn'
import LocalImg from '../const/Images'
import Urls, {getRealUrl} from '../const/Urls';

const {width, height} = Dimensions.get('window');

class Login extends Component {

    constructor(props) {
        super(props);
        this.state = {
            // name: '',
            // pass: '',
            name: 'TZ00001',
            pass: '000000',
        };
    }


    render() {
        return (
            <View style={{height: height, width: width, backgroundColor: '#ffffff'}}>
                <View style={{
                    flexDirection: 'row',
                    height: 60,
                    alignItems: 'center',
                    justifyContent: 'center',
                    backgroundColor: '#0066FF'
                }}>
                    <View style={{flex: 1, padding: 10}}>
                        <TouchableOpacity onPress={() => this.props.navigation.pop()}>
                            <Image source={LocalImg['backImg']} style={{height: 30, width: 30, resizeMode: 'contain'}}/>
                        </TouchableOpacity>
                    </View>
                    <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
                        <Text style={{fontSize: 20, color: '#ffffff'}}>登陆</Text>
                    </View>
                    <View style={{flex: 1, alignItems: 'flex-end', padding: 10}}>
                    </View>
                </View>
                <View>
                    <List>
                        <InputItem placeholder="请输入" autoCorrect={false}
                                   onChange={(text) => this.setState({
                                       name: text
                                   })}
                                   value={this.state.name}>用户名
                        </InputItem>
                        <InputItem placeholder="请输入" value={this.state.pass}
                                   onChange={(text) => this.setState({
                                       pass: text
                                   })}
                                   type="password">密码
                        </InputItem>
                        <View style={{margin: 12}}>
                            <Button type='primary' onClick={() => this.login()}>登陆</Button>
                        </View>
                    </List>
                </View>

            </View>
        );
    }

    login() {
        const data = new Map();
        data.set('name', this.state.name);
        data.set('pass', this.state.pass);

        fetch(getRealUrl(Urls['loginUrl'], data), {
                method: "GET",
                headers: {
                    Accept: "application/json",
                    "Content-Type": "application/json"
                },
            }
        )
            .then(response => response.json())
            .then(responseJson => {

                if (responseJson.token) {
                    const temp = JSON.stringify(responseJson);
                    AsyncStorage.setItem("user", temp);
                    Toast.success('登陆成功', 1);
                    this.props.navigation.pop();
                    DeviceEventEmitter.emit('login');
                } else {
                    Toast.fail(JSON.stringify(responseJson), 1);
                }

            })
            .catch(error => {
                console.error(error);
                Toast.fail('登陆失败', 1);
            });
    }


}

export default Login;